<template>
  <div class="sign-page">
    <div class="header f-r a-e j-b">
      <div class="sign-info">
        <div class="f-r a-c">
          参会人数：{{ joinInfo.peopleNumber }}
          <span style="margin: 0 10px" />
          专家人数：{{ joinInfo.administrativeOfficeNumber }}
          <span style="margin: 0 10px" />
          科室人数：{{ joinInfo.expertsNumber }}
        </div>
        <div class="f-r a-c">
          已签到人数：{{ signInfo.peopleNumber }}
          <span style="margin: 0 10px" />
          专家人数：{{ signInfo.administrativeOfficeNumber }}
          <span style="margin: 0 10px" />
          科室人数：{{ signInfo.expertsNumber }}
        </div>
        <div class="f-r a-c">
          未签到人数：{{ unSignInfo.peopleNumber }}
          <span style="margin: 0 10px" />
          专家人数：{{ unSignInfo.administrativeOfficeNumber }}
          <span style="margin: 0 10px" />
          科室人数：{{ unSignInfo.expertsNumber }}
        </div>
      </div>
      <el-button type="primary">查看签到列表</el-button>

    </div>
    <div class="seat-list">
      <el-row :gutter="10">
        <el-col v-for="item in seatList" :key="item.id" :span="3">
          <div :class="['seat-item f-c a-c j-c', item.receiveStatus === 4 ? 'active' : '']">
            <div class="header f-r j-b">
              <div class="index">{{ item.index }}</div>
              <div v-if="item.receiveStatus === 4" class="status1">已签到</div>
              <div v-else class="status2">未签到</div>
            </div>
            <img v-if="item.receiveStatus === 4" src="@/assets/seat.jpg" alt="">
            <img v-else src="@/assets/unseat.jpg" alt="">
            <div class="name">{{ item.expertName }}</div>
            <div class="subname">{{ item.expertTypeName }}</div>
            <div class="tag">{{ item.departName }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
        <div class="seat-list" style="margin-top: 15px;">
      <el-row :gutter="10">
        <el-col v-for="item in canhuiList" :key="item.id" :span="3">
          <div :class="['seat-item f-c a-c j-c', item.receiveStatus === 4 ? 'active' : '']">
            <div class="header f-r j-b">
              <div class="index">{{ item.index }}</div>
              <div v-if="item.receiveStatus === 4" class="status1">已签到</div>
              <div v-else class="status2">未签到</div>
            </div>
            <img v-if="item.receiveStatus === 4" src="@/assets/seat.jpg" alt="">
            <img v-else src="@/assets/unseat.jpg" alt="">
            <div class="name">{{ item.expertName }}</div>
            <div class="subname">{{ item.expertTypeName }}</div>
            <div class="tag">{{ item.departName }}</div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { http } from '@/api'
import { ExpertType, getName } from '@/dict'

export default {
  name: 'Sign',
  props: {
    currentDetail: Object
  },
  data() {
    return {
      joinInfo: {},
      signInfo: {},
      unSignInfo: {},
      seatList: [

      ],
      canhuiList: []

    }
  },
  created() {
    this.getSignList()
  },
  methods: {
    getSignList() {
      http.meeting_process.signList(this.currentDetail.id).then(res => {
        this.seatList = (res.data.reviewVOS || []).map((el, index) => {
          return {
            index: index + 1 > 9 ? index + 1 : '0' + (index + 1),
            expertTypeName: getName(el.expertType, ExpertType),
            ...el
          }
        })
        this.canhuiList = (res.data.joinMeetingList || []).map((el, index) => {
          return {
            index: index + 1 > 9 ? index + 1 : '0' + (index + 1),
            expertTypeName: getName(el.expertType, ExpertType),
            ...el
          }
        })
        this.joinInfo = res.data.joinNumber || {}
        this.signInfo = res.data.checkedInNumber || {}
        this.unSignInfo = res.data.noSignInNumber || {}
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sign-page {
    height: 100%;overflow:auto;
    .seat-list {
        .seat-item {
            border-radius: 8px;
            overflow: hidden;
            padding-bottom: 10px;
            border: 1px solid #999999;
            img {
                height: 85px;
                width: 85px;
                margin-bottom: 10px;
            }
            &.active {
                border: 1px solid #45c38d;
                .tag {
                    border-radius: 2px;
                    color: #5a7cf5;
                    border: 1px solid #5a7cf5;
                    background-color: #e2ecf8;
                    padding: 1px 5px;
                    font-size: 12px;
                }
            }
            .tag {
                border-radius: 2px;
                color: #999999;
                border: 1px solid #999999;
                background-color: #e3e3e3;
                padding: 1px 5px;
                font-size: 12px;
            }
            .header {
                width: 100%;
                padding-left: 5px;
            }
            .index {
                font-size: 14px;
                color: #333333;
            }
            .status1 {
                padding: 2px 5px;
                text-align: center;
                line-height: 14px;
                font-size: 12px;
                background-color: #d7fce1;
                border: 1px solid #45c38d;
                border-top: none;
                border-right: none;
                color: #45c38d;
            }
            .status2 {
                padding: 2px 5px;
                text-align: center;
                line-height: 14px;
                font-size: 12px;
                background-color: #e3e3e3;
                border: 1px solid #999999;
                border-top: none;
                border-right: none;
                color: #999999;
            }
            .name {
                font-size: 16px;
            }
            .subname {
                font-size: 14px;
                margin-bottom: 5px;
            }
        }
    }
    .sign-info {
        border-radius: 12px;
        color: #5a7cf5;
        border: 1px solid #5a7cf5;
        background-color: #e2ecf8;
        padding: 10px 20px;
        > div {
            font-size: 14px;
            line-height: 24px;
        }
    }
}
</style>
